<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{name}}AI 文本生成Demo</title>
    <style>
        /* TODO: 选择合适的CSS样式 */
        /* 选项A:
        body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
        textarea { width: 100%; height: 100px; margin-bottom: 10px; }
        #result { border: 1px solid #ddd; padding: 10px; margin-top: 20px; }
        */
        
        /* 选项B: */
        body { font-family: Times New Roman, serif; max-width: 600px; margin: 0 auto; padding: 10px; }
        textarea { width: 80%; height: 150px; margin-bottom: 15px; }
        #result { border: 2px solid #aaa; padding: 15px; margin-top: 25px; }
        /* */
    </style>
</head>
<body>
    <h1>{{name}}AI 文本生成Demo</h1>
    <!-- TODO: 添加输入框和按钮 -->
    <!-- 选项A: -->
    <textarea id="prompt" placeholder="Enter your prompt here..."></textarea>
    <button id="generateBtn">Generate</button>
     <!-- -->
    
    <!-- 选项B:
    <input type="text" id="prompt" placeholder="Enter your prompt here...">
    <button onclick="generateText()">Create Text</button>
    -->

    <div id="result"></div>

    <script>
        // TODO: 实现生成文本的函数
        async function generateText() {
            // 1. 获取用户输入
            // 2. 发送POST请求到后端
            // 3. 处理响应并显示结果

            /* 选项A:
            const prompt = document.getElementById('prompt').value;
            const response = await fetch('/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ prompt })
            });
            const data = await response.json();
            document.getElementById('result').textContent = data.response;
            */

            /* 选项B: */
            const prompt = document.querySelector('#prompt').value;
            try {
                const response = await fetch('/generate', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify({ prompt })
                });
                if (!response.ok) throw new Error('Network response was not ok');
                const data = await response.json();
                document.querySelector('#result').textContent = data.response;
            } catch (error) {
                console.error('Error:', error);
                document.querySelector('#result').textContent = 'An error occurred.';
            }
            /* */
        }

        // TODO: 添加事件监听器
        /* 选项A: */
        document.getElementById('generateBtn').addEventListener('click', generateText);
        /* */

        /* 选项B:
        window.onload = function() {
            document.querySelector('button').onclick = generateText;
        };
        */
    </script>
</body>
</html>